<template>
	<s-layout title="创建群聊" :bgStyle="{
		color:'#F6F6F6'
	}" onShareAppMessage>
		<view class="form ss-p-x-32 ss-p-y-20">
			<view class="label">群昵称</view>
			<view class="input ss-m-t-20">
				<input v-model="name" type="text" placeholder="请输入群昵称" />
			</view>
		</view>

		<view class="bottom-box ss-safe-bottom">
			<view class="w-100 ss-flex justify-center align-center ss-p-y-40">
				<view class="edit-btn" @click="save">完成</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'
	import {cdn,udid} from '@/im/config/index.js'

	const name = ref('')
	const iMMyInfo = computed(() => $store().userInfo);

	const save = async () => {
		const {
			code,
			data
		} = await imApi.createGroup({
			im_id: iMMyInfo.value.userID,
			platform: udid,
			name: name.value,
			groupImg: cdn(iMMyInfo.value.avatar),
			notification: '',
			im_id_arr: []
		})

		if (code === 0) {
			uni.showToast({
				title: '创建成功!',
				duration: 1500,
				icon: 'none',
				success() {
					setTimeout(() => {
						$store().getChatInfo(`GROUP${data.group_id}`, 'group', data
							.group_id)
					}, 1000)
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.form {
		width: 100%;
		background: #FFFFFF;

		.label {
			font-size: 32rpx;
			font-weight: normal;
			color: #3D3D3D;
		}

		.input {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			font-weight: normal;
		}
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;

		.edit-btn {
			width: 704rpx;
			height: 92rpx;
			border-radius: 16rpx;
			background: #FF5C02;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 92rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>